import React from 'react'
import Echart from '../Echart'

// (function (){
//   axios.get('/inputInfo').then((res)=>{
//     console.log(res);
//   })
// })()
export default function Home() {
  // 每一次的切换都是销毁他 可以直接进行数据的获取 也就是发送请求 这里采用的是localstorage存储数据 那么就从其中获取数据
  let datas = JSON.parse(localStorage.getItem('data')) || []
  // axios.get('/inputInfo').then((res)=>{
    //     console.log(res);
    //   })
  // console.log(datas);
  // 定义一个包含所有的地区和年龄的数组
  let address = [] //地区初始数据 地区不仅仅需要的是地区 还需要去重 另外还需要统计每一个地区存在的数量
  // 下方的 addressmap //地区去重之后的数据
  // 下方的 addressmapnum = [] //每一个去重后的地区存在的数量
  let age = []  //年龄
  let nameLength = datas.length//姓名  姓名的话只需要他的长度 所以直接定义 姓名的数量就是我数据的数量了
  
  datas.map((e)=>{// 遍历循环 , 将所有的地区添加到数组当中
    // console.log(e); 其中 age,name的长度  和 address是我们需要的
    address.push(e.address)
    age.push(e.age)
  })

  // 利用双层外循环进行数组的去重 同时在发现重复的时候可以进行对于的值的增加
  function A(addressmap) {
    let addressmapnum = [] //存储每一项对应数据出现的次数
    let len = addressmap.length
    for(let i = 0 ; i < len ; i++){
      //每次循环开始都让当前这一项是0
      addressmapnum[i] = 0
      //这里面是我的每一项,现在对他们进行比较,如果相同,就删除它,返回一个新的数组
      //每出现一个新的项目 就在newnumber中添加一个数字,第几项目出现的,就在哪里增加一个1 出现重复的内容 就在对应的内容的index处+1
      for(let j = i+1 ; j < len ; j++){
        if(addressmap[i] === addressmap[j]){ //当前的这一项等于它后面的某一项,就直接删除后面的这一项,同时向当前位置的数字+1
          addressmap.splice(j, 1)
          addressmapnum[i]++
          len-- // 减少循环次数提高性能
          j-- // 保证j的值自加后不变
        }
      }
      // 循环完毕之后 确认当前项没有重复的/或有重复的,都在这个位置+1,因为至少都有一项,只会更多
      addressmapnum[i]++
    }
    return {addressmap , addressmapnum}
  }
  let {addressmap,addressmapnum} = A(address)
  //console.log(addressmap,addressmapnum); //数据成功获取



  // console.log(age);//暂时用不到 
  let option = {
    tooltip: {},
    legend: {
      data: ['地区分布']
    },
    xAxis: {
      data: addressmap,
      axisLabel: {
        //x轴的文字旋转40度,而且有再多的文字都可以显示的下
        interval:0,
        rotate:40
     },
      // axisLine :  { show : Boolean}  设置轴体的显示隐藏
      
    },
    grid: {
      // 图表距离左侧20% 距离底部25%
      left: '20%',
      bottom:'15%'
    },
    yAxis: {},
    series: [
      {
        name: '地区分布',
        type: 'bar',
        data: addressmapnum
      }
    ]
  };
  let series = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  };
  let option4 = {
    title: {
      text: 'Funnel'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
    },
    series: [
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 60, name: 'Visit' },
          { value: 40, name: 'Inquiry' },
          { value: 20, name: 'Order' },
          { value: 80, name: 'Click' },
          { value: 100, name: 'Show' }
        ]
      }
    ]
  };
  let option3 = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}'
        },
        data: [
          {
            value: nameLength,
            name: '成员人数'
          }
        ]
      }
    ]
  };
  return (
    <div style={{height : '93vh', padding : '0' , margin : '0' , overflow : 'scroll' , display : 'flex' , flexWrap : 'wrap' , justifyContent : 'space-around'}}>
      <Echart option={option} />
      <Echart option={series} />
      <Echart option={option3} />
      <Echart option={option4} />
    </div>
  )
}
